<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        重排:--影响到了布局
            当Dom变化影响了宽度、位置，浏览器需要重新计算元素的几何属性,并重新构建渲染树---重排

            比如添加或者删除可见的DOM元素，页面初始渲染。浏览器窗口大小变化，元素位置尺寸改变

        重绘:
            元素外观属性变化，但是不影响局部变化，浏览器只需要重新绘制受影响的部分
            color,边框背景图片，文本阴影
            visibility 可见性变化

        */ 


        /**
         *  二者关系，重排比重绘层级高
         * 重排比重绘代价高，重排会触发重绘，重绘不一定引起重排
         * 
         * 
         * 避免多层内联样式，
         * 避免使用table布局
         * **/ 
    </script>
</body>
</html>